import React, { Component } from 'react';
import { Form, Input, NavBar,ErrorBlock, Space } from 'antd-mobile'
import { Button,Toast } from 'antd-mobile'
import "./code.css"
import service from '../../../api';

class code extends Component {
    constructor (props){
        super(props)
        this.state = {
            // codelist:{
                tel:'',
                telcode:''
            //}
        }
    }
   
    async getCode(){
        var res = await service.user.user_dosendmsgcode({tel:this.props.location.state.phone})
            this.setState({tel:res.data.data})
            console.log(res.data.data); 
    }

    async nextToPass(){
        var res = await service.user.user_docheckcode({
            tel: this.props.location.state.phone,
            telcode: this.state.telcode
            })
        // console.log(this.state.telcode);
        if(res.data.code == 200){
            this.props.history.push({pathname:'/register/pass',state:{ tel:this.state.tel} })
            // console.log(this.props.location.state.phone);
        }else{
            Toast.show({content:'验证码错误！'})
        }
    }
    onChange(e){
        this.setState({telcode: e.target.value })
    }
    render() {
        return (
            <div className='mycode'>
                <NavBar onBack={ ()=>{this.back() }}>验证码</NavBar> 
                 
                 <div className="block">
                    <input type="text" placeholder='短信验证码' value={this.state.telcode || ''} onChange={(e)=>{ this.onChange(e) }} />
                    <button className='btn' onClick={()=>{ this.getCode() }}>验证码</button>
                </div>
                <button onClick={()=>{ this.nextToPass() }}>下一步</button>
            </div>
        );
    }
    async back(){
        this.props.history.go(-1);
    }
}

export default code;